<template>
  <el-form ref="genInfoFormRef" :model="localInfo" :rules="rules" label-width="150px">
    <el-row>
      <el-col :span="12">
        <el-form-item prop="tplCategory">
          <template #label>
            <span>生成模板</span>
          </template>
          <el-select v-model="localInfo.tplCategory" @change="tplSelectChange">
            <el-option label="单表（增删改查）" value="crud" />
            <el-option label="树表（增删改查）" value="tree" />
            <el-option label="主子表（增删改查）" value="sub" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="tplWebType">
          <template #label>
            <span>前端类型</span>
          </template>
          <el-select v-model="localInfo.tplWebType">
            <el-option label="Vue2 Element UI 模版" value="element-ui" />
            <el-option label="Vue3 Element Plus 模版" value="element-plus" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item prop="packageName">
          <template #label>
            <span>
              生成包路径
              <el-tooltip content="生成在哪个java包下，例如 com.cj.system" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="localInfo.packageName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="moduleName">
          <template #label>
            <span>
              生成模块名
              <el-tooltip content="可理解为子系统名，例如 system" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="localInfo.moduleName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="businessName">
          <template #label>
            <span>
              生成业务名
              <el-tooltip content="可理解为功能英文名，例如 user" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="localInfo.businessName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="functionName">
          <template #label>
            <span>
              生成功能名
              <el-tooltip content="用作类描述，例如 用户" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="localInfo.functionName" />
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item prop="genType">
          <template #label>
            <span>
              生成代码方式
              <el-tooltip content="默认为zip压缩包下载，也可以自定义生成路径" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-radio-group v-model="localInfo.genType">
            <el-radio label="0">zip压缩包</el-radio>
            <el-radio label="1">自定义路径</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              上级菜单
              <el-tooltip content="分配到指定菜单下，例如 系统管理" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-tree-select
            :append-to-body="true"
            v-model="localInfo.parentMenuId"
            :data="menus"
            :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
            node-key="menuId"
            placeholder="请选择系统菜单"
            check-strictly
            default-expand-all
            :render-after-expand="false"
          />
        </el-form-item>
      </el-col>

      <el-col :span="24" v-if="localInfo.genType == '1'">
        <el-form-item prop="genPath">
          <template #label>
            <span>
              自定义路径
              <el-tooltip
                content="填写磁盘绝对路径，若不填写，则生成到当前Web项目下"
                placement="top"
              >
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="localInfo.genPath">
            <template #append>
              <el-dropdown>
                <el-button type="primary">
                  最近路径快速选择
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="localInfo.genPath = '/'"
                      >恢复默认的生成基础路径</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
          </el-input>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row v-show="localInfo.tplCategory == 'tree'">
      <h4 class="form-header">其他信息</h4>
      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              树编码字段
              <el-tooltip content="树显示的编码字段名， 如：dept_id" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="localInfo.treeCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in localInfo.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName || ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              树父编码字段
              <el-tooltip content="树显示的父编码字段名， 如：parent_Id" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="localInfo.treeParentCode" placeholder="请选择">
            <el-option
              v-for="(column, index) in localInfo.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName || ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              树名称字段
              <el-tooltip content="树节点的显示名称字段名， 如：dept_name" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="localInfo.treeName" placeholder="请选择">
            <el-option
              v-for="(column, index) in localInfo.columns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName || ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-show="localInfo.tplCategory == 'sub'">
      <h4 class="form-header">关联信息</h4>
      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              关联子表的表名
              <el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select
            v-model="localInfo.subTableName"
            placeholder="请选择"
            @change="subSelectChange"
          >
            <el-option
              v-for="(table, index) in tables"
              :key="index"
              :label="table.tableName + '：' + table.tableComment"
              :value="table.tableName || ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item>
          <template #label>
            <span>
              子表关联的外键名
              <el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
                <i class="el-icon-question"></i>
              </el-tooltip>
            </span>
          </template>
          <el-select v-model="localInfo.subTableFkName" placeholder="请选择">
            <el-option
              v-for="(column, index) in subColumns"
              :key="index"
              :label="column.columnName + '：' + column.columnComment"
              :value="column.columnName || ''"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import { ref, defineProps, defineExpose, watch, computed } from 'vue'
// import Treeselect from "@riophae/vue-treeselect"
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import type { FormInstance } from 'element-plus'

// 定义类型
interface Column {
  columnName?: string
  columnComment?: string
}

interface Table {
  tableName?: string
  tableComment?: string
  columns?: Column[]
}

interface Menu {
  menuId?: string
  menuName?: string
  children?: Menu[]
}

interface Info {
  tplCategory?: string
  tplWebType?: string
  packageName?: string
  moduleName?: string
  businessName?: string
  functionName?: string
  genType?: string
  parentMenuId?: string
  genPath?: string
  treeCode?: string
  treeParentCode?: string
  treeName?: string
  subTableName?: string
  subTableFkName?: string
  columns?: Column[]
  [key: string]: any
}

// 定义属性
interface Props {
  info: Info
  tables: Table[]
  menus: Menu[]
}

const props = defineProps<Props>()
const emit = defineEmits(['update:info'])

// 创建本地响应式副本
const localInfo = computed({
  get: () => props.info,
  set: (value) => emit('update:info', value),
})

// 表单引用
const genInfoFormRef = ref<FormInstance>()

// 子列
const subColumns = ref<Column[]>([])

// 规则
const rules = {
  tplCategory: [{ required: true, message: '请选择生成模板', trigger: 'blur' }],
  packageName: [{ required: true, message: '请输入生成包路径', trigger: 'blur' }],
  moduleName: [{ required: true, message: '请输入生成模块名', trigger: 'blur' }],
  businessName: [{ required: true, message: '请输入生成业务名', trigger: 'blur' }],
  functionName: [{ required: true, message: '请输入生成功能名', trigger: 'blur' }],
}

// 监听器
watch(
  () => props.info.subTableName,
  (val) => {
    setSubTableColumns(val)
  },
)

watch(
  () => props.info.tplWebType,
  (val) => {
    if (val === '') {
      // 使用 emit 更新而不是直接修改 prop
      emit('update:info', { ...props.info, tplWebType: 'element-ui' })
    }
  },
)

// 方法
/** 转换菜单数据结构 */
const normalizer = (node: Menu) => {
  if (node.children && !node.children.length) {
    delete node.children
  }
  return {
    id: node.menuId,
    label: node.menuName,
    children: node.children,
  }
}

/** 选择子表名触发 */
const subSelectChange = (value: string) => {
  localInfo.value.subTableFkName = ''
}

/** 选择生成模板触发 */
const tplSelectChange = (value: string) => {
  if (value !== 'sub') {
    localInfo.value.subTableName = ''
    localInfo.value.subTableFkName = ''
  }
}

/** 设置关联外键 */
const setSubTableColumns = (value: string | undefined) => {
  if (!value) return

  for (const item of props.tables) {
    const name = item.tableName
    if (value === name && item.columns) {
      subColumns.value = item.columns
      break
    }
  }
}

// 暴露组件实例属性
defineExpose({
  genInfoFormRef,
})
</script>
